<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>宠物洗炼数据校验</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background-color: #f7f9fc;
            color: #333;
            padding: 20px;
        }

        h2 {
            color: #3b5998;
        }

        label {
            display: inline-block;
            margin: 5px 10px 5px 0;
        }

        input {
            padding: 4px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 6px 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            border-collapse: collapse;
            margin: 10px 0;
            background: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        th, td {
            border: 1px solid #ccc;
            padding: 6px 10px;
            text-align: center;
        }

        th {
            background-color: #f0f2f5;
        }

        .range-grid td {
            vertical-align: top;
        }

        .progress-bar {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #007bff;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: bold;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .section {
            margin-top: 40px;
            padding-top: 10px;
            border-top: 2px dashed #ccc;
        }
    </style>
</head>
<body>
<h2>宠物洗炼数据校验工具</h2>

<label>Account: <input id="account" type="text"/></label>
<label>UID: <input id="uid" type="text" value="1876920565504348160"/></label>
<label>Pet ID: <input id="petId" type="number" value="5"/></label>
<label>请求次数: <input id="count" type="number" value="5"/></label>
<label>请求间隔(ms): <input id="delay" type="number" value="0"/></label>
<button onclick="startWash()">开始洗炼</button>

<div id="progress" class="progress-bar" style="display:none;">准备中...</div>

<div id="colorRate"></div>
<div id="rangeTable"></div>
<div id="summary"></div>
<div id="illegalTable"></div>

<script>
    // 加载记忆内容
    window.onload = function () {
        const fields = ["account", "uid", "petId", "count", "delay"];
        fields.forEach(f => {
            const val = localStorage.getItem(f);
            if (val !== null) document.getElementById(f).value = val;
        });
    };

    // 保存输入值
    function saveInputs() {
        const fields = ["account", "uid", "petId", "count", "delay"];
        fields.forEach(f => localStorage.setItem(f, document.getElementById(f).value));
    }

    const maxConfig = {
        3001: 15000, 3004: 15000, 3005: 15000, 3011: 15000,
        2001: 20000, 2002: 20000, 2003: 20000, 2004: 20000, 2005: 20000, 2006: 20000,
        2101: 40000, 2102: 40000, 2103: 40000, 2104: 40000, 2105: 40000, 2106: 40000,
        3010: 10000, 3009: 10000, 3002: 50000, 3003: 50000, 3008: 50000
    };

    const rateConfig = {
        1: {min: 0, max: 5000},
        2: {min: 5001, max: 10000},
        3: {min: 10001, max: 20000},
        4: {min: 20001, max: 50000},
        5: {min: 50001, max: 80000},
        6: {min: 80001, max: 100000},
    };

    const colorRates = {
        1: 65.0,
        2: 20.0,
        3: 11.0,
        4: 2.4,
        5: 1.2,
        6: 0.4
    };

    function renderColorRate() {
        let html = `<h3>颜色概率展示</h3><table><tr><th>颜色</th><th>概率</th></tr>`;
        for (const [id, rate] of Object.entries(colorRates)) {
            html += `<tr><td>${id}</td><td>${rate}%</td></tr>`;
        }
        html += `</table>`;
        document.getElementById('colorRate').innerHTML = html;
    }

    function renderRangeTable() {
        let html = `<h3>属性范围配置</h3><table class="range-grid"><tr>`;
        let count = 0;
        for (const [attrId, maxVal] of Object.entries(maxConfig)) {
            html += `<td><table><tr><th colspan="3">属性 ${attrId}</th></tr><tr><th>颜色</th><th>最小</th><th>最大</th></tr>`;
            for (const [color, rate] of Object.entries(rateConfig)) {
                const min = Math.round(maxVal * rate.min / 100000);
                const max = Math.round(maxVal * rate.max / 100000);
                html += `<tr><td>${color}</td><td>${min}</td><td>${max}</td></tr>`;
            }
            html += `</table></td>`;
            if (++count % 8 === 0) html += `</tr><tr>`;
        }
        html += `</tr></table>`;
        document.getElementById('rangeTable').innerHTML = html;
    }

    function initializeTables() {
        renderColorRate();
        renderRangeTable();
    }

    initializeTables();

    async function startWash() {
        saveInputs();
        const account = document.getElementById('account').value;
        const uid = document.getElementById('uid').value;
        const petId = parseInt(document.getElementById('petId').value);
        const count = parseInt(document.getElementById('count').value);
        const delay = parseInt(document.getElementById('delay').value || 0);

        let colors = {};
        let attrs = {};
        let illegal = [];

        const sectionId = `section_${Date.now()}`;
        const summaryDiv = document.createElement('div');
        summaryDiv.id = sectionId;
        summaryDiv.className = 'section';

        document.getElementById('progress').style.display = 'inline-block';

        for (let i = 0; i < count; i++) {
            document.getElementById('progress').innerText = `进度：${i + 1} / ${count}`;

            const res = await fetch('https://api-inke.huancaihz.com/api/v1/pet/wash', {
                method: 'POST',
                headers: {
                    'Accept': '*/*',
                    'Content-Type': 'application/json',
                    'access-token': 'tuling',
                    'account': account,
                    'platform-code': 'Inke',
                    'uid': uid
                },
                body: JSON.stringify({pet_id: petId})
            });

            const json = await res.json();
            if (json.code !== 0 || !json.data?.passive_skills_attrs) continue;

            for (const item of json.data.passive_skills_attrs) {
                colors[item.color] = (colors[item.color] || 0) + 1;
                attrs[item.attr_type] = (attrs[item.attr_type] || 0) + 1;

                const maxVal = maxConfig[item.attr_type];
                const rate = rateConfig[item.color];
                if (!maxVal || !rate) continue;

                const minAllowed = Math.round(maxVal * rate.min / 100000);
                const maxAllowed = Math.round(maxVal * rate.max / 100000);

                const isLegal = item.attr_value >= minAllowed && item.attr_value <= maxAllowed;
                const resultItem = {...item, minAllowed, maxAllowed, isLegal};

                if (!isLegal) illegal.push(resultItem);
            }
            await new Promise(r => setTimeout(r, delay));
        }

        document.getElementById('progress').style.display = 'none';

        const totalAttrs = Object.values(colors).reduce((a, b) => a + b, 0);
        const legalCount = totalAttrs - illegal.length;

        let html = `
        <h3>统计结果</h3>
        <p>总属性数量: ${totalAttrs}</p>
        <p>合法属性数量: ${legalCount} (${(legalCount / totalAttrs * 100).toFixed(2)}%)</p>
        <p>不合法属性数量: ${illegal.length} (${(illegal.length / totalAttrs * 100).toFixed(2)}%)</p>
        <h4>颜色分布:</h4>
        <ul>${Object.entries(colors).map(([k, v]) => `<li>颜色${k}: ${v} (${(v / totalAttrs * 100).toFixed(2)}%)</li>`).join('')}</ul>
        <h4>属性分布:</h4>
        <ul>${Object.entries(attrs).map(([k, v]) => `<li>属性${k}: ${v} (${(v / totalAttrs * 100).toFixed(2)}%)</li>`).join('')}</ul>
      `;

        summaryDiv.innerHTML = html;
        document.getElementById('summary').appendChild(summaryDiv);

        if (illegal.length > 0) {
            const illegalRows = illegal.map(item => `
          <tr>
            <td>${item.id}</td>
            <td>${item.attr_type}</td>
            <td>${item.attr_value}</td>
            <td>${item.color}</td>
            <td>${item.minAllowed}</td>
            <td>${item.maxAllowed}</td>
          </tr>`).join('');

            const illegalTable = `
          <div class="section">
            <h3>不合法属性明细</h3>
            <table>
              <tr><th>ID</th><th>属性类型</th><th>属性值</th><th>颜色</th><th>允许最小值</th><th>允许最大值</th></tr>
              ${illegalRows}
            </table>
          </div>`;

            document.getElementById('illegalTable').innerHTML += illegalTable;
        }
    }
</script>
</body>
</html>